<template>
    <el-affix :offset="0">
        <!--    导航栏-->
        <el-menu id="headId"
                 class="el-menu-demo"
                 mode="horizontal"
                 :default-active="activeIndex"
                 @select="handleSelect"
                 background-color="#404040"
                 text-color="#F6F6E8"
                 active-text-color="#F0D879"
                 router
        >
            <el-menu-item route="fbr" index="fbr">
                <span class="menu-font">指板</span>
            </el-menu-item>
            <el-menu-item route="interval" index="interval">
                <span class="menu-font">音程</span>
            </el-menu-item>
            <el-menu-item route="scale" index="scale">
                <span class="menu-font">音阶</span>
            </el-menu-item>
        </el-menu>
    </el-affix>
</template>
<script>
    import {h,} from 'vue'
    import {ElDivider} from 'element-plus'
    import 'element-plus/lib/theme-chalk/display.css';

    export default {
        name: 'Head',
        el: '#headId',
        data() {
            return {
                activeIndex: 'interval',
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                if (!this.$Global.isNull(key) && key !== 'me')
                    this.activeIndex = key;
                console.log(key, keyPath);
            },
        }
    }
</script>
<style>

</style>
<style>
    .el-submenu__icon-arrow {
        right: 0px;
    }

    .el-avatar {
        height: 30px;
        width: 30px;
    }

    .el-menu.el-menu--horizontal {
        /*border-bottom: solid 0px #e6e6e6;*/
    }

    /*.el-menu {*/
    /*position: fixed;*/
    /*z-index: 100;*/
    /*width: 100%;*/
    /*}*/

    .menu-font {
        font-size: 1em;
        font-weight: 300;
        font-family: "黑体"
    }

    .el-menu--popup {
        min-width: 100px;
    }
</style>